<template>
  <div class="ifc-viewer">
    <Toolbar
      :service="ifcService"
      :canvas-ref="canvasRef"
      @load-file="handleLoadFile"
      @load-url="handleLoadUrl"
    />
    
    <div class="viewer-content">
      <aside class="sidebar-left">
        <ModelTree
          :service="ifcService"
          @select-item="handleSelectItem"
          ref="modelTreeRef"
        />
      </aside>
      
      <main class="viewer-main">
        <IfcCanvas
          ref="canvasRef"
          @viewer-ready="handleViewerReady"
          @model-loaded="handleModelLoaded"
        />
      </main>
      
      <aside class="sidebar-right">
        <PropertyPanel />
      </aside>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import Toolbar from '@/components/Toolbar.vue'
import IfcCanvas from '@/components/IfcCanvas.vue'
import ModelTree from '@/components/ModelTree.vue'
import PropertyPanel from '@/components/PropertyPanel.vue'
import { IfcService } from '@/services/ifcService.js'

const canvasRef = ref(null)
const modelTreeRef = ref(null)
const ifcService = ref(null)

function handleViewerReady(viewer, service) {
  ifcService.value = service
}

async function handleModelLoaded() {
  ElMessage.success('模型加载成功')
  // 延迟一下，确保模型完全加载完成
  await new Promise(resolve => setTimeout(resolve, 500))
  await modelTreeRef.value?.loadTreeData()
}

async function handleLoadFile(file) {
  if (!canvasRef.value) {
    ElMessage.error('画布未初始化')
    return
  }
  
  try {
    // 先清除树数据
    modelTreeRef.value?.clearTreeData()
    await canvasRef.value.loadFile(file)
    ElMessage.success('文件加载成功')
    // 延迟一下，确保模型完全加载完成
    await new Promise(resolve => setTimeout(resolve, 500))
    await modelTreeRef.value?.loadTreeData()
  } catch (err) {
    ElMessage.error(err.message || '文件加载失败')
    // 如果加载失败，确保树数据已清除
    modelTreeRef.value?.clearTreeData()
  }
}

async function handleLoadUrl(url) {
  if (!canvasRef.value) {
    ElMessage.error('画布未初始化')
    return
  }
  
  try {
    // 先清除树数据
    modelTreeRef.value?.clearTreeData()
    await canvasRef.value.loadUrl(url)
    ElMessage.success('模型加载成功')
    // 延迟一下，确保模型完全加载完成
    await new Promise(resolve => setTimeout(resolve, 500))
    await modelTreeRef.value?.loadTreeData()
  } catch (err) {
    ElMessage.error(err.message || '模型加载失败')
    // 如果加载失败，确保树数据已清除
    modelTreeRef.value?.clearTreeData()
  }
}

function handleSelectItem(item) {
  // 选中项已通过 store 传递
  if (ifcService.value && item.expressID) {
    ifcService.value.highlight([item.expressID])
  }
}
</script>

<style scoped>
.ifc-viewer {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.viewer-content {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  grid-template-rows: 1fr;
  min-height: 0;
}

.sidebar-left {
  border-right: 1px solid #1e222b;
  overflow: hidden;
}

.viewer-main {
  min-width: 0;
  overflow: hidden;
}

.sidebar-right {
  border-left: 1px solid #1e222b;
  overflow: hidden;
}

@media (max-width: 1200px) {
  .viewer-content {
    grid-template-columns: 220px 1fr 260px;
  }
}

@media (max-width: 768px) {
  .viewer-content {
    grid-template-columns: 1fr;
  }
  
  .sidebar-left,
  .sidebar-right {
    display: none;
  }
}
</style>

